<template>
  <div class="queryProducts">
    <div class="admin_img_top">
        <Upload type="drag"
                name="imgs"
                multiple
                :action="uploadUri"
                :on-success="handleUploadSuccess"
                :with-credentials="true"
                :headers="headers"
                :default-file-list="imgList"
                :format="['jpg','jpeg','png','gif']">
          <div style="padding: 20px 0">
            <Button icon="ios-cloud-upload-outline">Upload files</Button>
            <p>请上传图片,推荐使用133x168比例的图片。</p>
          </div>
        </Upload>
        <Button type="primary" style="margin-bottom:10px;margin-left:10px;" @click="submitImg">添加</Button>
    </div>
    
    <div class="productsInfo">
      <Table border :columns="producsTitle" :data="products">
        <template slot-scope="{ row }" slot="action">
          <Button type="error" size="small" @click="handleSubmit(row)">删除</Button>
        </template>
      </Table>
    </div>
  </div>
</template>

<script>
import conf from '@/api/apiConf'
export default {
  data: () => ({
    uploadUri:conf.uploadFile, //后台上传图片地址
    headers:{'Access-Control-Allow-Origin':'*'},
    producsTitle: [{
            title: '图片ID',
            key: 'id',
            width: 70,
            align: 'center',
          },
          {
            title: '产品ID',
            key: 'p_id',
            width: 70,
            align: 'center',
          },
          {
            title: '图片地址',
            key: 'pro_img_url',
            // width: 70,
            align: 'center',
          },
          {
            title: '操作',
            slot: 'action',
            width: 150,
            align: 'center',
          },
    ],
    products: [],
    productId:1,
    files:null,
    imgList:[],
  }),
  created() {
    if(this.$route.params.img_id){
      this.productId=this.$route.params.img_id
    }else{
      return this.$Message.info('')
    }
    this.queryProImg(this.productId)
  },
  methods: {
    submitImg(){
      this.$Message.info('添加产品图片成功')
    },
   async handleSubmit(row){
     let params={
       id:row.id,
       url:row.pro_img_url
     }
      try {
        let res =await this.$http.post(conf.deleteProductImg, params)
        if(res.data.status===200){
          this.products=res.data.data
        }else{
          this.$Message.info('删除产品图片失败')
        }
      } catch (error) {
        this.$Message.info('删除产品异常')
      }
        this.queryProImg(this.productId)
    },
    handleUploadSuccess(file){
      //获取当前网页的完整地址
     var url = window.location.href;
    //  var urlstr = url.split("/"); //以“/”进行分割
    //  var urls = '';
    //  if (urlstr[2]) {
    //      urls = urlstr[0]+'//'+urlstr[2];
    //  }
    //  if(urls.search(':')>0){
    //    urlstr=urls.split(":")
    //    urls=urlstr[0]+":"+urlstr[1]
    //  }
       url = file.data.path.replace('public','/mogu');
       this.imgList.push({
        name: this.getFileName(url),
        url: url
    })
       this.addProImg(url)
    },
    getFileName(path){
        var pos1 = path.lastIndexOf('/');
        var pos2 = path.lastIndexOf('\\');
        var pos  = Math.max(pos1, pos2)
        if( pos<0 ) return path;
        return path.substring(pos+1);
    },
    async addProImg(url){
       let params={
        productId:this.productId,
        url
      }
      try {
        let res =await this.$http.post(conf.addProductImg, params)
        console.log(res);
        if(res.data.status===200){
          this.products=res.data.data
          this.queryProImg(this.productId)
        }else{
          this.$Message.info('添加产品图片失败')
        }
      } catch (error) {
        this.$Message.info('添加产品异常')
      }
    },
    async queryProImg(id){
      try {
        let res =await this.$http.post(conf.GetProductImg, {id:id})
        console.log(res);
        if(res.data.status===200){
          this.products=res.data.data
        }else{
          this.$Message.info('查询产品图片失败')
        }
      } catch (error) {
        this.$Message.info('查询产品异常')
      }
    }
  },
}
</script>

<style lang="less" scoped>
.queryProducts {
  padding: 10px;
  .search {
    margin: 20px;

    button {
      margin-left: 30px;
    }
  }

  .productsInfo {
    // padding: 20px;
  }
}

.addProducts {
  padding: 20px 50px;

  .menusItem {
    margin-bottom: 20px;

    span,
    label {
      font-size: 17px;
      vertical-align: middle;
      margin-right: 10px;
      font-family: '宋体';
      font-weight: 600;
      margin-left: 30px;
    }

    .rightItem {
      margin-left: 50px;
    }

    .rightTui {
      margin-top: 10px;
    }

    #menu {
      width: 200px;
      height: 32px;
      line-height: 1.5;
      padding: 4px 7px;
      font-size: 14px;
      border: 1px solid #dcdee2;
      border-radius: 4px;
      color: #515a6e;
      background-color: #fff;
    }
  }

  .ivu-input-number {
    width: 200px;
  }

  .ivu-upload {
    width: 650px;
    margin-top: 10px;
  }

  button {
    margin-right: 50px;
    margin-top: 20px;
    width: 650px;
    height: 30px;
  }
}
.admin_img_top{
  display: flex;
  align-items: flex-end;
}
</style>
